<template>
  <div ref="totalWrapperRef" class="rank_wrapper">
    <div style="overflow: hidden; height: 100%; width: 100%;">
      <div ref="container" class="rank_list">
        <div v-for="item in list" :key="item.id" class="slider-item">
          <p>{{ item.company }}</p>
          <el-slider :value="item.progress" />
          <span>{{ item.point }}分</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { px } from '@/utils/utils';
import * as TWEEN from '@tweenjs/tween.js';
export default {
  data() {
    return {
      value1: 88,
      timer: null,
      instance: null,
      list: [
        {
          company: '中能建设江苏计院有限公司项目cc',
          progress: 77,
          point: 98
        },
        {
          company: '中能建设江苏计院有限公司项目112',
          progress: 66,
          point: 45
        },
        {
          company: '中能建设江苏计院有限公司项目3',
          progress: 90,
          point: 22
        },
        {
          company: '中能建设江苏计院有限公司项目2',
          progress: 88,
          point: 100
        }
        // {
        //   company: '中能建设江苏计院有限公司项目22',
        //   progress: 100,
        //   point: 4
        // }
        // {
        //   company: '中能建设江苏计院有限公司项目cc',
        //   progress: 77,
        //   point: 98
        // },
        // {
        //   company: '中能建设江苏计院有限公司项目112',
        //   progress: 66,
        //   point: 45
        // },
        // {
        //   company: '中能建设江苏计院有限公司项目3',
        //   progress: 90,
        //   point: 22
        // },
        // {
        //   company: '中能建设江苏计院有限公司项目2',
        //   progress: 88,
        //   point: 100
        // },
        // {
        //   company: '中能建设江苏计院有限公司项目22999',
        //   progress: 100,
        //   point: 4
        // }
      ].map((v, index) => ({
        ...v,
        id: index
      }))
    };
  },
  beforeDestroy() {
    // window.clearInterval(this.timer);
    this.instance.stop();
    cancelAnimationFrame(this.timer);
  },
  mounted() {
    const currentHight = this.$refs.totalWrapperRef.clientHeight;
    this.instance = new TWEEN.Tween({ top: 0 })
      .to({ top: this.$refs.container.clientHeight - currentHight + 2 * px(40) }, this.list.length * 2000)
      .onUpdate(e => {
        this.$refs.container.style.top = `-${e.top}px`;
      })
      .onRepeat(() => {
        console.log('重复开始了', this.instance);
        this.instance.pause();
        setTimeout(() => {
          this.instance.resume();
        }, 1000);
      })
      .repeat(Infinity)
      .start();
    const animate = () => {
      this.timer = requestAnimationFrame(animate);
      TWEEN.update();
    };
    if (this.$refs.container.clientHeight < this.$refs.totalWrapperRef.clientHeight) {
      this.instance.stop();
      return;
    }
    animate();
    // if (this.timer) {
    //   window.clearInterval(this.timer);
    // }
    // this.timer = setInterval(() => {
    //   this.$refs.container.classList.add('scroll');
    //   setTimeout(() => {
    //     if (!this.timer) {
    //       return;
    //     }
    //     this.$refs.container.classList.remove('scroll');
    //     this.list.push(this.list.shift());
    //   }, 1000);
    // }, 2000);
  }
};
</script>
<style lang="scss" scoped>
@keyframes row-out {
  from {
    top: 0;
  }
  to {
    top: px(-35);
  }
}
.rank_wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: px(20);
  padding-top: px(30);
  padding-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
  align-content: flex-start;
  .rank_list {
    display: flex;
    flex-direction: column;
    grid-gap: px(8);
    position: relative;
    // overflow: hidden;
    &.scroll {
      position: relative;
      animation: row-out 1s linear forwards;
      .row:first-child {
        opacity: 0;
        transition: opacity 1s;
      }
    }
  }
  .slider-item {
    position: relative;
    padding-right: px(50);
    margin-bottom: px(0);
    > p {
      font-size: px(14);
    }
    :deep(.el-slider) {
      height: px(15);
    }
    :deep(.el-slider__button) {
      height: px(10);
      width: px(10);
      border: none;
      box-shadow: 1px 1px 17px 3px #ffffff7a;
    }
    :deep(.el-slider__runway) {
      background: rgba(0, 0, 0, 0);
      margin: 0;
    }
    :deep(.el-slider__bar) {
      background: linear-gradient(303deg, #e8d399 0%, #ffcd4a 7%, #ccac62 24%, #398493 75%, rgba(59, 136, 146, 0.1) 100%);
    }
    > p {
      margin: 0;
    }
    > span {
      position: absolute;
      right: 0;
      bottom: px(2);
      font-weight: bold;
      font-size: px(16);
      color: #ffdc7e;
    }
  }
}
</style>
